import React from 'react';
import ReactECharts from 'echarts-for-react';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';

const EChartsDemo: React.FC = () => {
  const { mode } = useThemeStore();
  const theme = getTheme(mode);

  // 示例数据
  const lineData = [
    { name: '00:00', value: 10 },
    { name: '04:00', value: 25 },
    { name: '08:00', value: 40 },
    { name: '12:00', value: 30 },
    { name: '16:00', value: 50 },
    { name: '20:00', value: 35 },
    { name: '24:00', value: 45 },
  ];

  const pieData = [
    { name: '移动端', value: 45 },
    { name: '桌面端', value: 30 },
    { name: '平板端', value: 15 },
    { name: '其他', value: 10 },
  ];

  const columnData = [
    { name: '周一', value: 120 },
    { name: '周二', value: 132 },
    { name: '周三', value: 101 },
    { name: '周四', value: 134 },
    { name: '周五', value: 90 },
    { name: '周六', value: 230 },
    { name: '周日', value: 210 },
  ];

  const wordCloudData = [
    { name: 'React', value: 100 },
    { name: 'Vue', value: 80 },
    { name: 'Angular', value: 60 },
    { name: 'TypeScript', value: 90 },
    { name: 'JavaScript', value: 85 },
    { name: 'Python', value: 75 },
    { name: 'FastAPI', value: 70 },
  ];

  // ECharts 折线图配置
  const lineOption = {
    title: {
      text: '用户活跃度趋势',
      textStyle: {
        color: theme.textPrimary,
      },
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: lineData.map(item => item.name),
      axisLine: {
        lineStyle: {
          color: theme.textSecondary
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: theme.textSecondary
        }
      }
    },
    series: [{
      data: lineData.map(item => item.value),
      type: 'line',
      smooth: true,
      lineStyle: {
        color: '#1890ff',
        width: 3
      }
    }],
    backgroundColor: 'transparent'
  };

  // ECharts 饼图配置
  const pieOption = {
    title: {
      text: '用户设备分布',
      textStyle: {
        color: theme.textPrimary,
      },
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'middle',
      textStyle: {
        color: theme.textPrimary
      }
    },
    series: [
      {
        name: '设备分布',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['35%', '50%'],
        data: pieData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ],
    backgroundColor: 'transparent'
  };

  // ECharts 柱状图配置
  const columnOption = {
    title: {
      text: '每日访问量',
      textStyle: {
        color: theme.textPrimary,
      },
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: columnData.map(item => item.name),
      axisLine: {
        lineStyle: {
          color: theme.textSecondary
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: theme.textSecondary
        }
      }
    },
    series: [{
      name: '访问量',
      type: 'bar',
      barWidth: '60%',
      data: columnData,
      itemStyle: {
        color: '#1890ff'
      }
    }],
    backgroundColor: 'transparent'
  };

  // ECharts 词云配置
  const wordCloudOption = {
    title: {
      text: '技术栈热度',
      textStyle: {
        color: theme.textPrimary,
      },
      left: 'center'
    },
    tooltip: {
      show: true
    },
    series: [{
      type: 'wordCloud',
      sizeRange: [12, 60],
      rotationRange: [0, 0],
      gridSize: 8,
      shape: 'circle',
      textStyle: {
        color: mode === 'dark' 
          ? () => `rgb(${Math.round(Math.random() * 160 + 90)}, ${Math.round(Math.random() * 160 + 90)}, ${Math.round(Math.random() * 160 + 90)})`
          : () => `rgb(${Math.round(Math.random() * 160)}, ${Math.round(Math.random() * 160)}, ${Math.round(Math.random() * 160)})`
      },
      data: wordCloudData
    }],
    backgroundColor: 'transparent'
  };

  return React.createElement('div', {
    style: { 
      padding: '24px', 
      background: theme.contentBackground,
      minHeight: '100vh'
    }
  }, 
    React.createElement('h1', {
      style: { 
        color: theme.textPrimary, 
        marginBottom: '24px',
        fontSize: '24px',
        fontWeight: 'bold'
      }
    }, 'ECharts 图表组件演示'),
    
    React.createElement('div', {
      style: { marginBottom: '24px' }
    },
      React.createElement('h2', {
        style: { 
          color: theme.textPrimary, 
          marginBottom: '16px',
          fontSize: '20px'
        }
      }, '折线图'),
      React.createElement('div', {
        style: { 
          height: '400px', 
          padding: '20px',
          background: theme.cardBackground,
          borderRadius: '8px',
          border: `1px solid ${theme.cardBorder}`,
        }
      },
        React.createElement(ReactECharts, {
          option: lineOption,
          style: { height: '100%', width: '100%' },
          theme: mode === 'dark' ? 'dark' : 'light'
        })
      )
    ),
    
    React.createElement('div', {
      style: { display: 'flex', gap: '24px', marginBottom: '24px' }
    },
      React.createElement('div', { style: { flex: 1 } },
        React.createElement('h2', {
          style: { 
            color: theme.textPrimary, 
            marginBottom: '16px',
            fontSize: '20px'
          }
        }, '饼图'),
        React.createElement('div', {
          style: { 
            height: '400px', 
            padding: '20px',
            background: theme.cardBackground,
            borderRadius: '8px',
            border: `1px solid ${theme.cardBorder}`,
          }
        },
          React.createElement(ReactECharts, {
            option: pieOption,
            style: { height: '100%', width: '100%' },
            theme: mode === 'dark' ? 'dark' : 'light'
          })
        )
      ),
      
      React.createElement('div', { style: { flex: 1 } },
        React.createElement('h2', {
          style: { 
            color: theme.textPrimary, 
            marginBottom: '16px',
            fontSize: '20px'
          }
        }, '柱状图'),
        React.createElement('div', {
          style: { 
            height: '400px', 
            padding: '20px',
            background: theme.cardBackground,
            borderRadius: '8px',
            border: `1px solid ${theme.cardBorder}`,
          }
        },
          React.createElement(ReactECharts, {
            option: columnOption,
            style: { height: '100%', width: '100%' },
            theme: mode === 'dark' ? 'dark' : 'light'
          })
        )
      )
    ),
    
    React.createElement('div', {},
      React.createElement('h2', {
        style: { 
          color: theme.textPrimary, 
          marginBottom: '16px',
          fontSize: '20px'
        }
      }, '词云图'),
      React.createElement('div', {
        style: { 
          height: '400px', 
          padding: '20px',
          background: theme.cardBackground,
          borderRadius: '8px',
          border: `1px solid ${theme.cardBorder}`,
        }
      },
        React.createElement(ReactECharts, {
          option: wordCloudOption,
          style: { height: '100%', width: '100%' },
          theme: mode === 'dark' ? 'dark' : 'light'
        })
      )
    )
  );
};

export default EChartsDemo;